<template>
<div class="et-card-back">
  <div class="card et-card">
    <div class="top-bar grid-x" :style="{ 'background-color': theme.mainBg }">
      <div class="small-2 cell">
        <et-btn :classes="backBtnClasses" :icon="flipBackIcon" :handler="flipBackHandler" />
      </div>
      <div class="small-8 cell text-center">
        <span class="card-title">{{ cardTitle }}</span>
      </div>
      <div class="small-2 cell"></div>
    </div>
    <div class="et-card-btn-wrapper">
      <div v-for="btnCfgs in opsBtns" class="grid-x text-center">
        <div v-for="btnCfg in btnCfgs" class="small-6 cell">
          <et-btn :classes="opsBtnClasses"
                    :styles="opsBtnStyles"
                    :icon="btnCfg.icon"
                    :txt="btnCfg.txt"
                    :handler="btnHandler(btnCfg.handler)"
                    :disabled="isLocked" />
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { EtIcon } from '../../widgets';

export default {

  components: {
    EtIcon
  },

  props: {
    id: {
      type: String,
      required: true
    },
    isLocked: {
      type: Boolean
    },
    theme: {
      type: Object,
      required: true
    },
    flipBackIcon: {
      type: String,
      default: 'back'
    },
    flipBackHandler: {
      type: Function,
      default: () => {}
    },
    cardTitle: {
      type: String,
      required: true
    },
    opsBtns: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      backBtnClasses: ['back-btn', 'button'],
      opsBtnClasses: ['button', 'et-icon-btn'],
      opsBtnStyles: {
        'background-color': this.theme.opsBtnBg
      }
    };
  },

  methods: {
    btnHandler(handler) {
      if (!this.isLocked) {
        handler(this.id);
      }
    }
  }

};
</script>
